<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">下拉选择菜单</div>
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">单个下拉菜单</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
				<template slot="code-js">{{ jsCode3 }}</template>
			</code-view>
			
			<div class="example-title">自定义选中颜色</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
		
			<div class="example-title">多个下拉菜单组合</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">下拉菜单属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="140">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="60">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">下拉菜单事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="事件名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="事件说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="事件回调参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
			<br>
			<br>
			<br>
			<br>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/droplistdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo,
			CodeView
		},
		data() {
			return {
				jsCode1: `import {Droplist} from 'gabriel-ui'
Vue.use(Droplist)`,
				htmlCode2: `<p style="display: flex;">
	<span style="flex-grow: 1;">
		<gr-droplist :options="options1" v-model="filter1"/>
	</span>
	<span style="flex-grow: 1;">
		<gr-droplist :options="options2" v-model="filter2"/>
	</span>
	<span style="flex-grow: 1;">
		<gr-droplist :options="options3" v-model="filter3"/>
	</span>
</p>`,
				jsCode2: `export default {
	data() {
		return {
			filter1: 'bbb',
			options1: [
				{ text: 'AAA', value: 'aaa'},
				{ text: 'BBB', value: 'bbb'},
				{ text: 'CCC', value: 'ccc'}
			],
			filter2: 'fff',
			options2: [
				{ text: 'DDD', value: 'ddd'},
				{ text: 'EEE', value: 'eee'},
				{ text: 'FFF', value: 'fff'}
			],
			filter3: 'ggg',
			options3: [
				{ text: 'GGG', value: 'ggg'},
				{ text: 'HHH', value: 'hhh'},
				{ text: 'JJJ', value: 'jjj'}
			],
		}
	}
}`,
				htmlCode3: `<gr-droplist :options="options4" v-model="filter4"/>`,
				jsCode3: `export default {
	data() {
		return {
			filter4: 1,
			options4: [
				{ text: '默认排序', value: 1},
				{ text: '价格由高到低', value: 2},
				{ text: '价格由低到高', value: 3}
			]
		}
	}
}`,
				htmlCode4: `<gr-droplist selectColor="#2196f3" :options="options4" v-model="filter4"/>`,
				propertiesExplain: [
					{
						attrName: 'v-model',
						introduce: `绑定的value值`,
						type: 'String/Number/Boolean',
						optionValues: '----',
						defaultValue: 'default'
					},
					{
						attrName: 'options',
						introduce: `下拉列表的数据`,
						type: 'Array[Object]',
						optionValues: '----',
						defaultValue: '[]'
					},
					{
						attrName: 'selectColor',
						introduce: `选中状态的文字及图标颜色`,
						type: 'String',
						optionValues: '----',
						defaultValue: '#f40'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'change',
						introduce: `菜单的切换事件`,
						param: '当前选中项目的索引值index'
					},
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
